<!--
  @author: 善良的YWJ
  @Created by shanliangdeYWJ on 2020/09/19 05:11:55
  @file: card.vue
  @description:
  ==================
  一行多项的一个卡片
  会传入图文数组
  根据每一组渲染一个图文，每组图文所占空间一致
  子页面中间的导航
  ==================
  @link [Github](https://github.com/shanliangdeYWJ)
-->

<template>
  <div class="card clearfix">
    <div class="card-item" v-for="(item,index) in lists" :key="index" :style="`width:calc(100% / ${lists.length})`">
      <div class="content">
        <div class="title">{{item.title}}</div>
        <p>{{item.content}}</p>
      </div>
      <img :src="item.images" alt="">
    </div>
  </div>
</template>

<script>
export default {
  name: 'Card',
  props: {
    lists: {
      type: Array
    }
  }
};
</script>

<style lang='scss' scoped>
.card {
}
.card-item {
  padding: 10px;
  box-sizing: border-box;
  position: relative;
  float: left;
  .content {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    text-align: center;
    transition: 0.5s;
    .title {
      font-size: 30px;
    }

    p {
      font-size: 16px;
    }
  }
  &:hover > .content {
    top: 45%;
  }
  img {
    width: 100%;
  }
}
</style>
